<template>
  <div class="main">
    <div class="biankuang">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form" class="user-layout-login">
        <a-tabs
          :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset'}">
          <a-tab-pane key="tab1" tab="注册用户">
            <a-form-item class="itemm" :labelCol="labelCol"  :wrapperCol="wrapperCol">
              <a-input  class="innn"  placeholder="请输入用户账号" v-decorator="[ 'username', validatorRules.username]"/>
            </a-form-item>

            <template v-if="!model.id">
              <a-form-item class="itemm" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input class="innn" type="password" placeholder="请输入登陆密码"
                         v-decorator="[ 'password', validatorRules.password]"/>
              </a-form-item>
              <a-form-item class="itemm" :labelCol="labelCol"  :wrapperCol="wrapperCol">
                <a-input  class="innn" type="password" @blur="handleConfirmBlur" placeholder="请重新输入登陆密码"
                         v-decorator="[ 'confirmpassword', validatorRules.confirmpassword]"/>
              </a-form-item>
            </template>

            <a-form-item class="itemm" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input class="innn"  placeholder="请输入用户名称" v-decorator="[ 'realname', validatorRules.realname]"/>
            </a-form-item>

            <a-form-item  class="itemm" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select
                class="innn"
                mode="multiple"
                placeholder="请选择专业类别"
                v-model="selectedSpecialty">
                <a-select-option v-for="(specialty,speicaltyindex) in specialtyList" :key="speicaltyindex.toString()"
                                 :value="specialty.id">
                  {{ specialty.specialtyName }}
                </a-select-option>
              </a-select>
            </a-form-item>

            <!--        <a-form-item label="角色分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!roleDisabled" >-->
            <!--          <a-select-->
            <!--            mode="multiple"-->
            <!--            style="width: 100%"-->
            <!--            placeholder="请选择用户角色"-->
            <!--            v-model="selectedRole">-->
            <!--            <a-select-option v-for="(role,roleindex) in roleList" :key="roleindex.toString()" :value="role.id">-->
            <!--              {{ role.roleName }}-->
            <!--            </a-select-option>-->
            <!--          </a-select>-->
            <!--        </a-form-item>-->

            <!--部门分配-->
            <a-form-item  class="itemm" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!departDisabled">
              <a-input-search
                class="innn"
                placeholder="点击右侧按钮选择部门"
                v-model="checkedDepartNameString"
                @search="onSearch">
                <a-button slot="enterButton" icon="search">选择</a-button>
              </a-input-search>
            </a-form-item>
            <a-form-item class="itemm" label="头像" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-upload
                listType="picture-card"
                class="avatar-uploader"
                :showUploadList="false"
                :action="uploadAction"
                :data="{'isup':1}"
                :headers="headers"
                :beforeUpload="beforeUpload"
                @change="handleChange"
              >
                <img v-if="picUrl" :src="getAvatarView()"  style="height:104px;max-width:300px"/>
                <div v-else>
                  <a-icon  :type="uploadLoading ? 'loading' : 'plus'"/>
                  <div class="ant-upload-text">上传头像</div>
                </div>
              </a-upload>
            </a-form-item>
            <a-form-item  class="itemm"  :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-date-picker
                class="innn"
                placeholder="请选择生日"
                v-decorator="['birthday', {initialValue:!model.birthday?null:moment(model.birthday,dateFormat)}]"/>
            </a-form-item>

            <a-form-item  class="itemm"  :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select class="innn" v-decorator="[ 'sex', {}]" placeholder="请选择性别">
                <a-select-option :value="1">男</a-select-option>
                <a-select-option :value="2">女</a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item  class="itemm" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input class="innn"  placeholder="请输入邮箱" v-decorator="[ 'email', validatorRules.email]"/>
            </a-form-item>

            <a-form-item  class="itemm" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input  class="innn" placeholder="请输入手机号码" :disabled="disabledAuth('user:form:phone')"
                       v-decorator="[ 'phone', validatorRules.phone]"/>
            </a-form-item>
            <a-form-item  class="itemm" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input  class="innn"  placeholder="请输入办公室电话" :disabled="disabledAuth('user:form:officephone')"
                       v-decorator="[ 'officephone', validatorRules.officephone]"/>
            </a-form-item>
          </a-tab-pane>
        </a-tabs>
      </a-form>
    </a-spin>
    <depart-window ref="departWindow" @ok="modalFormOk"></depart-window>
    <div class="main" v-show="!disableSubmit">


      <a-button    style="margin-left:20px;width: 75%"
                @click="handleSubmit" type="primary" :loading="confirmLoading" class="login-button">注册</a-button>
      <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
        <a style="margin-left:20px">放弃编辑</a>
      </a-popconfirm>
    </div>
    <div>
      <a-form-item>
        <router-link :to="{ name: 'login'}" class="login" style="margin-left:150px">
          返回登录
        </router-link>
      </a-form-item>
    </div>
    <!--  </a-drawer>-->
  </div>
  </div>
</template>

<script>
  import pick from 'lodash.pick'
  import moment from 'moment'
  import Vue from 'vue'
  // 引入搜索部门弹出框的组件
  import departWindow from '../system/modules/DepartWindow'
  import {ACCESS_TOKEN} from "@/store/mutation-types"
  import {getAction, httpAction, putAction} from '@/api/manage'
  import {addUser, editUser, queryUserRole, queryall, checkUsername,registerUser} from '@/api/api'
  import {disabledAuthFilter} from "@/utils/authFilter"
  import {duplicateCheck} from '@/api/api'
  import {specialtyall} from '@/api/api'

  export default {
    name: "RoleModal",
    components: {
      departWindow,
    },
    data() {
      return {
        departDisabled: false, //是否是我的部门调用该页面
        deptId: '',
        roleDisabled: false, //是否是角色维护调用该页面
        roleId: '',
        modalWidth: 800,
        drawerWidth: 700,
        modaltoggleFlag: true,
        confirmDirty: false,
        selectedDepartKeys: [], //保存用户选择部门id
        checkedDepartKeys: [],
        checkedDepartNames: [], // 保存部门的名称 =>title
        checkedDepartNameString: "", // 保存部门的名称 =>title
        userId: "", //保存用户id
        disableSubmit: false,
        userDepartModel: {userId: '', departIdList: []}, // 保存SysUserDepart的用户部门中间表数据需要的对象
        dateFormat: "YYYY-MM-DD",
        validatorRules: {
          username: {
            rules: [{
              required: true, message: '请输入用户账号!'
            }, {
              validator: this.validateUsername,
            }]
          },
          password: {
            rules: [{
              required: true,
              // pattern:/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/,
              message: '请输入密码!'
            }, {
              validator: this.validateToNextPassword,
            }],
          },
          confirmpassword: {
            rules: [{
              required: true, message: '请重新输入登录密码!',
            }, {
              validator: this.compareToFirstPassword,
            }],
          },
          realname: {rules: [{required: true, message: '请输入用户名称!'}]},
          phone: {rules: [{validator: this.validatePhone}]},
          officephone: {rules: [{validator: this.validateOfficephone}]},
          email: {
            rules: [{
              validator: this.validateEmail
            }],
          },
          roles: {}
          //  sex:{initialValue:((!this.model.sex)?"": (this.model.sex+""))}
        },
        title: "操作",
        visible: false,
        model: {},
        roleList: [],
        specialtyList: [],
        selectedRole: [],
        selectedSpecialty: [],
        labelCol: {
          xs: {span: 12},
          sm: {span: 6},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        uploadLoading: false,
        confirmLoading: false,
        headers: {},
        form: this.$form.createForm(this),
        picUrl: "",
        url: {
          addUDepartIds: "/sys/user/addUDepartIds", // 引入为用户添加部门信息需要的url
          editUDepartIds: "/sys/user/editUDepartIds", // 引入为用户更新部门信息需要的url
          fileUpload: window._CONFIG['domianURL'] + "/sys/common/upload",
          imgerver: window._CONFIG['domianURL'] + "/sys/common/view",
          userWithDepart: "/sys/user/userDepartList", // 引入为指定用户查看部门信息需要的url
          userId: "/sys/user/generateUserId", // 引入生成添加用户情况下的url
          syncUserByUserName: "/process/extActProcess/doSyncUserByUserName",//同步用户到工作流
        },
      }
    },
    created() {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token": token}
      this.add()
    },
    computed: {
      uploadAction: function () {
        return this.url.fileUpload;
      }
    },
    methods: {
      disabledAuth(code) {
        return disabledAuthFilter(code);
      },
      //窗口最大化切换
      toggleScreen() {
        if (this.modaltoggleFlag) {
          this.modalWidth = window.innerWidth;
        } else {
          this.modalWidth = 800;
        }
        this.modaltoggleFlag = !this.modaltoggleFlag;
      },
      initialRoleList() {
        queryall().then((res) => {
          if (res.success) {
            this.roleList = res.result;
          } else {
            console.log(res.message);
          }
        });
      },
      initialSpecialtyList() {
        specialtyall().then((res) => {
          if (res.success) {
            this.specialtyList = res.result;
          } else {
            console.log(res.message);
          }
        });
      },

      loadUserRoles(userid) {
        queryUserRole({userid: userid}).then((res) => {
          if (res.success) {
            this.selectedRole = res.result;
          } else {
            console.log(res.message);
          }
        });
      },
      refresh() {
        this.selectedDepartKeys = []
        this.checkedDepartKeys = []
        this.checkedDepartNames = []
        this.checkedDepartNameString = ""
        this.userId = ""
      },
      routeTo() {
        this.$router.push({name: 'login'})
      },
      add() {
        this.picUrl = "";
        this.refresh()
        this.registerUser({});
      },
      registerUser(record) {
        this.resetScreenSize(); // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
        let that = this;
        that.initialRoleList();
        that.initialSpecialtyList();
        that.selectedSpecialty = record.specialty;
        that.checkedDepartNameString = "";
        that.form.resetFields();
        if (record.hasOwnProperty("id")) {
          that.loadUserRoles(record.id);
          this.picUrl = "Has no pic url yet";
        }
        if (record.id) {
          let b = [];
          if (record.specialty.indexOf(",") != -1) {
            b = record.specialty.split(",")
            if (b[b.length - 1] == "") {
              b = b.splice(0, b.length - 1)
            }
            that.selectedSpecialty = b
          } else {
            b = [record.specialty]
            that.selectedSpecialty = b
          }

        } else {
          that.selectedSpecialty = record.specialty
        }
        that.userId = record.id;
        that.visible = true;
        that.model = Object.assign({}, record);
        that.$nextTick(() => {
          that.form.setFieldsValue(pick(this.model, 'username', 'selectedSpecialty', 'sex', 'realname', 'email', 'phone'))
        });
        // 调用查询用户对应的部门信息的方法
        that.checkedDepartKeys = [];
        that.loadCheckedDeparts();
      },
      //
      loadCheckedDeparts() {
        let that = this;
        if (!that.userId) {
          return
        }
        getAction(that.url.userWithDepart, {userId: that.userId}).then((res) => {
          that.checkedDepartNames = [];
          if (res.success) {
            for (let i = 0; i < res.result.length; i++) {
              that.checkedDepartNames.push(res.result[i].title);
              this.checkedDepartNameString = this.checkedDepartNames.join(",");
              that.checkedDepartKeys.push(res.result[i].key);
            }
          } else {
            console.log(res.message);
          }
        })
      },
      close() {
        this.$emit('close');
        this.visible = false;
        this.disableSubmit = false;
        this.selectedRole = [];
        this.selectedSpecialty = [];
        this.userDepartModel = {};
        this.checkedDepartNames = [];
      },
      moment,
      handleSubmit() {
        if (this.departDisabled === true) {
          this.handleSubmitDepart();
          return
        } else if (this.roleDisabled === true) {
          this.handleSubmitRole()
          return
        }
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let avatar = that.model.avatar;
            if (!values.birthday) {
              values.birthday = '';
            } else {
              values.birthday = values.birthday.format(this.dateFormat);
            }
            let formData = Object.assign(this.model, values);
            formData.avatar = avatar;
            if (!this.model.id) {
              if (this.selectedSpecialty) {
                formData.specialty = this.selectedSpecialty.length > 0 ? this.selectedSpecialty.join(",") : '';
              } else {
                formData.specialty = ''
              }

            } else {
              let b = [this.selectedSpecialty]
              let bb = b.length > 0 ? b.join(",") : ''
              formData.specialty = bb;
            }


            console.log("a:                            " + formData.specialty);

            formData.selectedroles = this.selectedRole.length > 0 ? this.selectedRole.join(",") : '';

            if (that.userDepartModel.userId) {
              that.addDepartsToUser(that, formData); // 调用根据当前用户添加部门信息的方法
            }
            let obj;
            if (!this.model.id) {
              formData.id = this.userId;
              obj = registerUser(formData);
            } else {
              obj = registerUser(formData);
            }
            obj.then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.$emit('ok');
              } else {
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.checkedDepartNames = [];
              that.close();
            })

          }
        })
      },
      // 提交表单（我的部门调用)
      handleSubmitDepart() {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let avatar = that.model.avatar;
            if (!values.birthday) {
              values.birthday = '';
            } else {
              values.birthday = values.birthday.format(this.dateFormat);
            }
            let formData = Object.assign(this.model, values);
            formData.avatar = avatar;
            formData.selectedroles = this.roleId;

            //生成userId
            getAction(this.url.userId).then((res) => {
              if (res.success) {
                this.userId = res.result;
                console.log("generateUserId:" + this.userId)
                formData.id = that.userId;
                console.log("formData.id:" + formData.id)
                this.addDepartsToUser1(that, formData); // 调用根据当前用户添加部门信息的方法
                addUser(formData).then((res) => {
                  if (res.success) {
                    that.$message.success(res.message);
                    that.$emit('ok');
                  } else {
                    that.$message.warning(res.message);
                  }
                }).finally(() => {
                  that.confirmLoading = false;
                  that.checkedDepartNames = [];
                  that.close();
                })
              }
            })
          }
        })
      },
      //提交表单（角色维护调用）
      handleSubmitRole() {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let avatar = that.model.avatar;
            if (!values.birthday) {
              values.birthday = '';
            } else {
              values.birthday = values.birthday.format(this.dateFormat);
            }
            let formData = Object.assign(this.model, values);
            formData.avatar = avatar;
            formData.selectedroles = this.selectedRole.length > 0 ? this.selectedRole.join(",") : '';
            if (this.roleId != '') {
              formData.selectedroles = this.roleId;
            }
            that.addDepartsToUser(that, formData); // 调用根据当前用户添加部门信息的方法
            let obj;
            if (!this.model.id) {
              formData.id = this.userId;
              obj = registerUser(formData);
            } else {
              obj = registerUser(formData);
            }
            obj.then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.$emit('ok');
              } else {
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.checkedDepartNames = [];
              that.close();
            })

          }
        })
      },
      handleCancel() {
        this.close()
      },
      // 根据当前用户添加部门信息的方法
      addDepartsToUser(that, formData) {
        let httpurl = '';
        let method = '';
        if (this.userDepartModel.userId != formData.id) {
          httpurl += this.url.addUDepartIds;
          method = 'post';
        } else {
          httpurl += this.url.editUDepartIds;
          method = 'put';
        }
        httpAction(httpurl, this.userDepartModel, method).then((res) => {
          if (res.success) {
            this.userDepartModel = {};
          } else {
            that.$message.warning(res.message);
          }
        })
      },
      // 根据当前用户添加部门信息的方法（我的部门调用）
      addDepartsToUser1: function () {
        let httpurl = ''
        let method = ''
        httpurl += this.url.addUDepartIds
        method = 'post';
        let departIdList = [];
        departIdList.push(this.deptId);
        httpAction(httpurl, {userId: this.userId, departIdList: departIdList}, method).then((res) => {
          if (res.success) {
            this.userId = ''
            this.deptId = ''
            this.departIdList = []
          } else {
            this.$message.warning(res.message)
          }
        })
      },
      validateToNextPassword(rule, value, callback) {
        const form = this.form;
        const confirmpassword = form.getFieldValue('confirmpassword');
        if (value && confirmpassword && value !== confirmpassword) {
          callback('两次输入的密码不一样！');
        }
        if (value && this.confirmDirty) {
          form.validateFields(['confirm'], {force: true})
        }
        callback();
      },
      compareToFirstPassword(rule, value, callback) {
        const form = this.form;
        if (value && value !== form.getFieldValue('password')) {
          callback('两次输入的密码不一样！');
        } else {
          callback()
        }
      },
      validatePhone(rule, value, callback) {
        if (!value || new RegExp(/^1[3|4|5|7|8][0-9]\d{8}$/).test(value)) {
          callback();
        } else {
          callback("请输入正确格式的手机号码!");
        }
      },
      validateOfficephone(rule, value, callback) {
        if (!value || new RegExp(/^8[3|5|7|8][0-9]\d{5}$/).test(value)) {
          callback();
        } else {
          callback("请输入正确格式的办公室电话!");
        }
      },
      validateEmail(rule, value, callback) {
        if (!value) {
          callback()
        } else {
          if (new RegExp(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/).test(value)) {
            var params = {
              tableName: 'sys_user',
              fieldName: 'email',
              fieldVal: value,
              dataId: this.userId
            };
            duplicateCheck(params).then((res) => {
              console.log(res)
              if (res.success) {
                callback()
              } else {
                callback("邮箱已存在!")
              }
            })
          } else {
            callback("请输入正确格式的邮箱!")
          }
        }
      },
      validateUsername(rule, value, callback) {
        var params = {
          id: this.model.id,
          username: value
        };
        checkUsername(params).then((res) => {
          if (res.success) {
            callback();
          } else {
            callback("用户账号已存在！");
          }
        });
      },
      handleConfirmBlur(e) {
        const value = e.target.value
        this.confirmDirty = this.confirmDirty || !!value
      },

      normFile(e) {
        console.log('Upload event:', e)
        if (Array.isArray(e)) {
          return e
        }
        return e && e.fileList
      },
      beforeUpload: function (file) {
        var fileType = file.type;
        if (fileType.indexOf('image') < 0) {
          this.$message.warning('请上传图片');
          return false;
        }
        //TODO 验证文件大小
      },
      handleChange(info) {
        this.picUrl = "";
        if (info.file.status === 'uploading') {
          this.uploadLoading = true
          return
        }
        if (info.file.status === 'done') {
          var response = info.file.response;
          this.uploadLoading = false;
          console.log(response);
          if (response.success) {
            this.model.avatar = response.message;
            this.picUrl = "Has no pic url yet";
          } else {
            this.$message.warning(response.message);
          }
        }
      },
      getAvatarView() {
        return this.url.imgerver + "/" + this.model.avatar;
      },
      // 搜索用户对应的部门API
      onSearch() {
        this.$refs.departWindow.add(this.checkedDepartKeys, this.userId);
      },

      // 获取用户对应部门弹出框提交给返回的数据
      modalFormOk(formData) {
        this.checkedDepartNames = [];
        this.selectedDepartKeys = [];
        this.userId = formData.userId;
        this.userDepartModel.userId = formData.userId;
        for (let i = 0; i < formData.departIdList.length; i++) {
          this.selectedDepartKeys.push(formData.departIdList[i].key);
          this.checkedDepartNames.push(formData.departIdList[i].title);
          this.checkedDepartNameString = this.checkedDepartNames.join(",");
        }
        this.userDepartModel.departIdList = this.selectedDepartKeys;
      },
      // 根据屏幕变化,设置抽屉尺寸
      resetScreenSize() {
        let screenWidth = document.body.clientWidth;
        if (screenWidth < 500) {
          this.drawerWidth = screenWidth;
        } else {
          this.drawerWidth = 800;
        }
      },
    }
  }
</script>

<style scoped>
  .innn{
    border-radius: 6px;
    width:100%;
    margin-left: 40px;
  }
  .avatar-uploader > .ant-upload {
    width: 104px;
    height: 104px;
  }

  .ant-upload-select-picture-card i {
    font-size: 49px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .drawer-bootom-button {
    position: absolute;
    bottom: -8px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }

  /*
    .user-layout-login {
    label {
      font-size: 14px;
    }

    .getCaptcha {
      display: block;
      width: 100%;
      height: 40px;
    }

    .forge-password {
      font-size: 14px;
    }

    button.login-button {
      padding: 0 15px;
      font-size: 16px;
      height: 40px;
      width: 100%;
    }

    .user-login-other {
      text-align: left;
      margin-top: 24px;
      line-height: 22px;

    .item-icon {
      font-size: 24px;
      color: rgba(0,0,0,.2);
      margin-left: 16px;
      vertical-align: middle;
      cursor: pointer;
      transition: color .3s;

    &:hover {
       color: #1890ff;
     }
    }

    .register {
      float: right;
    }
    }
    }*/
  button.login-button {
    padding: 0 15px;
    font-size: 16px;
    height: 40px;
    width: 100%;
  }
  .biankuang {
    background: url("~@/assets/biankuang.png")  no-repeat;
    background-size: 100% 100%;
    width:440px;
    position: absolute;
    left:180px;
    margin-top: 10px;
  }
  .itemm{
    line-height: 1;
    margin: 0px;
    padding: 5px 5px 0px 5px;
  }

</style>